// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 添加淡入效果
    document.body.classList.add('loaded');
    
    // 初始化卡片悬停效果
    initCardHoverEffects();
    
    // 初始化图片预览功能
    initImagePreviews();
    
    // 初始化表单验证
    initFormValidation();
    
    // 初始化筛选器动画
    initFilterAnimation();
    
    // 设置活动导航项
    setActiveNavItem();
    
    // 初始化移动端导航
    initMobileNav();
});

// 卡片悬停效果
function initCardHoverEffects() {
    const cards = document.querySelectorAll('.card.h-100');
    cards.forEach(card => {
        card.addEventListener('mouseenter', function() {
            this.style.transform = 'translateY(-10px)';
            this.style.boxShadow = '0 15px 30px rgba(0, 0, 0, 0.15)';
        });
        
        card.addEventListener('mouseleave', function() {
            this.style.transform = 'translateY(0)';
            this.style.boxShadow = '0 4px 15px rgba(0, 0, 0, 0.08)';
        });
    });
}

// 图片预览功能
function initImagePreviews() {
    const detailImages = document.querySelectorAll('.detail-image');
    detailImages.forEach(img => {
        if (!img.src.includes('no-image')) {
            img.style.cursor = 'pointer';
            img.addEventListener('click', function() {
                openImageModal(this.src);
            });
        }
    });
}

// 打开图片预览模态框
function openImageModal(src) {
    // 创建模态框元素
    const modal = document.createElement('div');
    modal.className = 'image-preview-modal';
    
    // 创建图片元素
    const img = document.createElement('img');
    img.src = src;
    img.className = 'preview-image';
    
    // 创建关闭按钮
    const closeBtn = document.createElement('button');
    closeBtn.className = 'close-modal-btn';
    closeBtn.innerHTML = '<i class="fas fa-times"></i>';
    closeBtn.onclick = function() {
        document.body.removeChild(modal);
    };
    
    // 组装模态框
    modal.appendChild(img);
    modal.appendChild(closeBtn);
    
    // 添加到页面
    document.body.appendChild(modal);
    
    // 动画效果
    setTimeout(() => {
        modal.style.opacity = '1';
    }, 10);
    
    // 点击模态框背景关闭
    modal.addEventListener('click', function(e) {
        if (e.target === modal) {
            document.body.removeChild(modal);
        }
    });
}

// 表单验证
function initFormValidation() {
    const forms = document.querySelectorAll('form');
    forms.forEach(form => {
        form.addEventListener('submit', function(event) {
            if (!form.checkValidity()) {
                event.preventDefault();
                event.stopPropagation();
                
                // 显示自定义错误提示
                highlightInvalidFields(form);
            }
            
            form.classList.add('was-validated');
        });
    });
}

// 高亮显示无效字段
function highlightInvalidFields(form) {
    const invalidFields = form.querySelectorAll(':invalid');
    invalidFields.forEach(field => {
        field.parentElement.classList.add('invalid-feedback-active');
        
        // 添加抖动效果
        field.classList.add('shake-animation');
        setTimeout(() => {
            field.classList.remove('shake-animation');
        }, 500);
    });
}

// 筛选器动画
function initFilterAnimation() {
    const filterToggle = document.getElementById('filter-toggle');
    if (filterToggle) {
        const filterCard = document.querySelector('.filter-card');
        
        filterToggle.addEventListener('click', function() {
            filterCard.classList.toggle('filter-collapsed');
            
            const icon = this.querySelector('i');
            if (filterCard.classList.contains('filter-collapsed')) {
                icon.classList.remove('fa-chevron-up');
                icon.classList.add('fa-chevron-down');
                this.querySelector('span').textContent = '展开筛选';
            } else {
                icon.classList.remove('fa-chevron-down');
                icon.classList.add('fa-chevron-up');
                this.querySelector('span').textContent = '收起筛选';
            }
        });
    }
}

// 设置活动导航项
function setActiveNavItem() {
    // 获取当前路径
    const currentPath = window.location.pathname;
    const searchParams = new URLSearchParams(window.location.search);
    const status = searchParams.get('status');
    const type = searchParams.get('type');
    
    // 移除所有活动类
    const menuItems = document.querySelectorAll('.sidebar-menu-item');
    menuItems.forEach(item => {
        item.classList.remove('active');
    });
    
    // 根据路径设置活动项
    if (currentPath === '/') {
        document.getElementById('nav-home')?.classList.add('active');
    } else if (currentPath === '/items' || currentPath.startsWith('/items/') && !currentPath.includes('/new')) {
        if (status === 'LOST') {
            document.getElementById('nav-lost')?.classList.add('active');
        } else if (status === 'FOUND') {
            document.getElementById('nav-found')?.classList.add('active');
        } else if (!status && !type) {
            document.getElementById('nav-all')?.classList.add('active');
        }
    } else if (currentPath === '/items/new') {
        document.getElementById('nav-new')?.classList.add('active');
    }
    
    // 如果有类型参数，设置相应类型的活动项
    if (type) {
        const typeLinks = document.querySelectorAll(`.sidebar-menu-item[href="/items?type=${type}"]`);
        if (typeLinks.length > 0) {
            typeLinks[0].classList.add('active');
        }
    }
}

// 初始化移动端导航
function initMobileNav() {
    const toggleButton = document.getElementById('toggle-sidebar');
    const sidebar = document.getElementById('sidebar');
    const contentWrapper = document.querySelector('.content-wrapper');
    
    if (toggleButton && sidebar) {
        // 点击切换按钮时打开/关闭侧边栏
        toggleButton.addEventListener('click', function() {
            sidebar.classList.toggle('active');
        });
        
        // 点击内容区域时关闭侧边栏（仅限移动端）
        if (contentWrapper) {
            contentWrapper.addEventListener('click', function() {
                if (window.innerWidth <= 992) {
                    sidebar.classList.remove('active');
                }
            });
        }
        
        // 窗口大小变化时处理
        window.addEventListener('resize', function() {
            if (window.innerWidth > 992) {
                sidebar.classList.remove('active');
            }
        });
    }
} 